---
image: /generated/articles-docs-paths-interpolate-path.png
title: interpolatePath()
crumb: "@remotion/paths"
---

_Part of the [`@remotion/paths`](/docs/paths) package._

Interpolates between two SVG paths. The function takes three arguments:

- `value`, which is a number.
  - If it is `0`, the first path is returned.
  - If it is `1`, the second path is returned.
  - If it is inbetween or outside the range, the path is interpolated.
- `firstPath`, which must be a valid SVG path.
- `secondPath`, which must be a valid SVG path.

```tsx twoslash
import { interpolatePath } from "@remotion/paths";

const interpolated = interpolatePath(0.5, "M 0 0 L 100 0", "M 100 0 L 0 0");
console.log(interpolated); // "M 50 0 L 50 0"
```

## Credits

Source code stems mostly from [d3-interpolate-path](https://github.com/pbeshai/d3-interpolate-path).

## See also

- [`@remotion/paths`](/docs/paths)
- [Source code for this function](https://github.com/remotion-dev/remotion/blob/main/packages/paths/src/interpolate-path/interpolate-path.ts)
